<template>
    <div class="center">
        
      <div class="center-construct">
         <el-button type="primary" style="margin-right: 30px;" @click="constructClick">添加分类</el-button>
      </div> 
      <div class="center-table">
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          height="70vh"
          row-key="id"
          :header-cell-style="tableHeaderColor"
          :tree-props="{children: 'childList', hasChildren: 'hasChildren'}">
          <el-table-column
            prop="name"
            label="分类名称"
            >
          </el-table-column>
          <el-table-column
            prop="key"
            label="分类别名"
            >
          </el-table-column>
          <el-table-column
            prop="fromId"
            label="已关联表单"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="启用状态">
             <template slot-scope="scope">
                <p v-if ="scope.row.status == '1'"> 启用</p>
                <p v-if="scope.row.status == '2'" > 关闭</p>
             </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
             <template slot-scope="scope">
              <el-button type="text" v-if="!scope.row.pid"  @click="addSubdirectory(scope.row)">添加子目录</el-button>
              <el-button type="text" @click="upDataClick(scope.row)">编辑</el-button>
              <el-button type="text" v-if="!scope.row.childList"  @click="configurationClick(scope.row)">配置列表</el-button>
             </template>
          </el-table-column>
        </el-table>
      <div>
        <el-dialog
         :title="constructTitle"
         :visible.sync="dialogVisible"
         width="500px"
         >
         <div >
            <el-form :model="constructForm" :rules="constructFormRules" ref="ruleForm" label-width="140px" >
                <el-form-item label="父级" prop="idArr">
                    <el-cascader
                    :show-all-levels="false"
                    :props="{children:'children',value:'id',label:'name',checkStrictly: true}"
                      v-model="constructForm.idArr"
                      :options="superiorList"
                      :disabled="constructForm.status ? true :false"
                      @change="handleChange" />
                </el-form-item>
               <el-form-item label="分类名称" prop="name">
                   <el-input v-model="constructForm.name" placeholder="请输入分类名称"></el-input>
               </el-form-item>
               <el-form-item label="分类别名" prop="key">
                   <el-input v-model="constructForm.key" placeholder="请输入分类别名"></el-input>
               </el-form-item>
               <el-form-item label="是否启用" prop="name" v-if="constructForm.status">
                <el-switch
                   v-model="constructForm.status"
                   :active-value="1"
                   :inactive-value="2"
                   active-text="开启"
                   inactive-text="关闭">
                </el-switch>
               </el-form-item>
               <!-- 202404BB549c7aabbefd41e3aaa7284f61ea3X54 -->
               <!-- app_id -->
            </el-form>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="addClickType">确 定</el-button>
         </span>
       </el-dialog>
       <el-dialog
         title="配置表单列表"
         :visible.sync="configurationVisible"
         width="700px"
         >
          <div class="configuration">
            <el-table
             :data="configurationData"
             style="width: 100%">
             <el-table-column
            align="center"
            label="id"
            prop="id"
            width="80"
          ></el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="info"
      align="center"
      label="描述">
    </el-table-column>
    <el-table-column
      prop="updateTime"
      align="center"
      label="更新时间">
    </el-table-column>
    <el-table-column
      prop="address"
      align="center"
      width="180"
      label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="text" :disabled=" associateData.fromId == scope.row.id? true : false" @click="associateClick(scope.row)">关联</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="listPram.size"
          :current-page.sync="listPram.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
          </div>
       </el-dialog>
    </div>
  </template>
  
  <script>
  import { configCategoryEdit , configCategoryAdd , configCategoryGet,formConfigList , configForms } from '@/api/api'
  export default {
      data(){
          return{
              constructTitle:'添加分类',
              configurationData:[],
              tableData:[],
              dialogVisible:false,
              constructForm:{
                type:6,
                status:1
              },
              listPram:{
              queryKeyWords:'',
                size:10,
                page:1
              },
              associateData:{},
              configurationVisible:false,
              superiorList:[{id:'',name:'根目录',children:[]}],
              constructFormRules:{
                name:[{ required: true, message: '请输入分类名称', trigger: 'blur' }],
                key:[{ required: true, message: '请输入分类别名', trigger: 'blur' }],
                idArr:[{ required: true, message: '请选择分类上级', trigger: 'change' }]
            },
          }
      },
      mounted(){
        this.initConfigCategory()
        this.initFormConfigList()
      },
      methods:{
        async initFormConfigList(){
        const res = await formConfigList(this.listPram)
        if(res.code == 200){
          this.configurationData = res.data
          this.total = res.pageInfo.recordCount
        }
        },
        async initConfigCategory(){
          const res = await  configCategoryGet({type:6})
          this.tableData =JSON.parse(JSON.stringify(res.data)) 
          this.superiorList[0].children = []
          this.superiorList[0].children = res.data
        //   this.superiorList[0].children.forEach(item=>{
        //     item.childList = []
        //   })
        },
        handleChange(v){
           console.log(v)
        },
        async addClickType(){
         const  valid = await this.$refs.ruleForm.validate()
         if(valid){
            if(this.constructForm.status){
                // this.constructForm.id =  this.constructForm.id[this.constructForm.id.length - 1]
                const res = await  configCategoryEdit(this.constructForm)
                if(res.code == 200){
                    this.$message.success('编辑成功！');
                    this.constructForm = { type:6 }
                    this.$refs.ruleForm.clearValidate()
                    this.initConfigCategory()
                    this.dialogVisible = false
                }else{
                    this.$message.error(res.message);
                }
            }else{                
              this.constructForm.pid =  this.constructForm.idArr[this.constructForm.idArr.length - 1]
              console.log(this.constructForm.pid)
              const res = await  configCategoryAdd(this.constructForm)
              if(res.code == 200){
                this.$message.success('新增成功！');
                this.constructForm = { type:6 }
                this.$refs.ruleForm.clearValidate()
                this.initConfigCategory()
                this.dialogVisible = false
              }else{
                this.$message.error(res.message);
              }
            }
         }
        },
       async associateClick(v){
          const  confirm =  await  this.$confirm("是否确认关联?", "提示", { confirmButtonText: "确定",   cancelButtonText: "取消",  type: "warning"})
          if(confirm){
            this.associateData.formId = v.id
            const res = await  configForms(this.associateData)
          if(res.code == 200){
            this.$message.success('关联成功')
            this.configurationVisible = false
            this.initConfigCategory()
           }else{
            this.$message.error(res.message)
           }
          }
        },
        configurationClick(v){
            // console.log(v)
          this.associateData.id = v.id
          this.associateData.fromId = v.fromId
        //   console.log(this.associateData)
          this.configurationVisible = true
        },
        handleCurrentChange(val) {
          this.listPram.page = val;
          this.initFormConfigList()
      },
      addSubdirectory(v){
          this.constructTitle = '添加子类目'
          this.constructForm.idArr = ['',v.id]
          this.constructForm.status = 0
        //   v.status = 0
        //   this.constructForm = JSON.parse(JSON.stringify(v)) 
          this.dialogVisible = true
          setTimeout(()=>{
                this.$refs.ruleForm.clearValidate()
            })
      },
      sizechange(val) {
          this.listPram.size = val;
          this.initFormConfigList()
      },
        upDataClick(v){
          this.constructTitle = '编辑分类'
            if(v.childList){
                v.idArr= ['']
            }else{
                v.idArr= ['',v.pid]
            }
        //    console.log(v)
           this.dialogVisible = true
           this.constructForm =JSON.parse(JSON.stringify(v))
           setTimeout(()=>{
                this.$refs.ruleForm.clearValidate()
            })
        },
          constructClick(){
            this.constructForm = {
                type:6
            }
          this.constructTitle = '新增分类'
              this.dialogVisible = true
              setTimeout(()=>{
                this.$refs.ruleForm.clearValidate()
              })
          }
      }
  }
  </script>
  
  <style>
  .center{
      width: calc(100% - 40px);
      height: calc(100% - 30px);
      background-color: #fff;
      padding-top: 30px;
      padding:30px 20px 0 20px;
  }
  .center-construct{
      width: 100%;
      display: flex;
      justify-content: end;
      margin-bottom: 30px;
  }
  .center-table{
      margin-top: 30px;
      padding: 0 20px;
  }
  .configuration{

  }
  .configuration{
    height: 60vh;
    overflow-y: auto;
}
::v-deep .el-upload--text{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
/* 针对 Firefox */
.configuration {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.configuration::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.configuration {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.configuration {
  overflow: auto;
}

  </style>